$(() => {
    // 定义一些状态变量
    let isUsernameReady = false,
        isPasswordReady = false,
        isMobileReady = false,
        isSmscodeReady = false;

    // 1. 点击刷新图像验证码
    $('.form-contain .form-item .captcha-graph-img img').click(function () {
        $(this).attr('src', '/image_code/?rand' + Math.random())
    })
    // 2. 用户名校验，光标离开用户名输入框就校验
    let $username = $('input[name="username"]');
    $username.blur(fnCheckUsername);

    function fnCheckUsername() {
        // 校验用户名
        isUsernameReady = false;
        // 获取输入
        let sUsername = $username.val()
        // 校验
        if (sUsername === '') {
            message.showError('用户名不能为空');
            return
        }
        if (!(/^\w{5,20}$/).test(sUsername)) {
            message.showError('请输入5-20位用户名')
            return
        }
        // 发送ajax
        $.ajax({
            url: '/username/' + sUsername + '/',
            type: 'GET',
            dataType: 'json',
            success: function (res) {
                if (res.data.count !== 0) {
                    message.showError('用户名已注册')
                } else {
                    message.showInfo('可以正常使用')
                    isUsernameReady = true
                }
            },
            error: function (xhr, msg) {
                message.showError('服务器超时，请重试！')
            }
        })
    }

    // 3.检测密码是否一致
    let $passwordRepeat = $('input[name="password_repeat"]');
    $passwordRepeat.blur(fnCheckPassword);

    function fnCheckPassword() {
        isPasswordReady = false;
        let password = $('input[name="password"]').val();
        let passwordRepeat = $passwordRepeat.val();
        if (password === '' || passwordRepeat === '') {
            message.showError('密码不能为空');
            return
        }
        if (password !== passwordRepeat) {
            message.showError('两次密码输入不一致');
            return
        }
        if (password === passwordRepeat) {
            isPasswordReady = true
        }
    }

    // 4.检查手机号码是否可用
    let $mobile = $('input[name="mobile"]');
    $mobile.blur(fnCheckMobile);

    function fnCheckMobile() {
        isMobileReady = true;
        let sMobile = $mobile.val();
        if (sMobile === '') {
            message.showError('手机号码不能为空');
            return
        }
        if (!(/^1[3-9]\d{9}$/).test(sMobile)) {
            message.showError('手机号码格式不正确');
            return
        }
        //发送ajax
        $
            .ajax({
                url: '/mobile/' + sMobile + '/',
                type: 'GET',
                dataType: 'json',

            })
            .done((res) => {
                if (res.data.count !== 0) {
                    message.showError(res.data.mobile + '已经注册，请重新输入！')
                }
                else {
                    message.showInfo(res.data.mobile + '可以正常使用！');
                    isMobileReady = true
                }

            })
            .fail(() => {
                message.showError('服务器超时，请重试！')
            })
    }

    // 5.发送短信验证码
    let $smsButton = $('.sms-captcha');
    $smsButton.click(()=>{
        // 拿到数据
        let sCaptcha = $('input[name="captcha_graph"]').val();
        if(sCaptcha === ''){
            message.showError('请输入图形验证码')
            return
        }
        // todo:判断长度

        if(!isMobileReady){
            fnCheckMobile();
            return
        }

        $
            .ajax({
                url: '/sms_code/',
                type: 'POST',
                data: {
                    mobile: $mobile.val(),
                    captcha: sCaptcha
                },
                dataType: 'json'
            })
            .done((res)=>{
                if(res.errno !== '0'){
                    message.showError(res.errmsg)
                }else{
                    message.showSuccess(res.errmsg)
                }
            })
            .fail(()=>{
                message.showError('服务器超时，请重试')
            })
    })
})